Collection Player

Adding the Collection Playback Widget

This will playback the collection's content in the player.

Get Started

Step 1: Add the following HTML into the body section of your web application code to add Collection player widget.

<vdz-mashup-collection id="collection-player" data-widget='true'> </vdz-mashup-collection>

Note: Make sure data-widget is set to 'true' as this applies the VIDIZMO default styling to the widget.

Input properties for Collection Player Widget

Property	Type	Default	Required	Description
mashup-id	string	-	Yes	Id corresponding to a unique mashup in user portal
show-slider	boolean	-	No	Sets whether or not slider should be expanded
start-from-mashup-id	string	-	No	When provided, collection player will start from the mashup whose id is provided

Add Collection Player Widget methods

Step 2: Add the following method into the body section of your web application code by making a function inside the script tags to call widget methods. A sample method can be seen as follows

// to collapse player's slider  
function collapseSlider() {
    document.getElementById('collection-player').collapseSlider();
}

// to expand player's slider  
function expandSlider() {
    document.getElementById('collection-player').expandSlider();
}

Other available methods are listed below.

Methods for Collection Player Widget

Method	Parameters	Return Type	Description
isFullScreen	-	Boolean	Returns true if the video player is in full screen
isSliderExpanded	-	Boolean	Returns true if the collection player slider is expanded
collapseSlider	-	Object	Collapse the player slider if it is expanded otherwise it will have no impact
expandSlider	-	Object	Expand the slider if it is collapse otherwise it will have no impact.
goToMashup	mashupId	object	Play the collection's mashup whose id is provided

Call Collection Player Widget methods

Step 3: Add the following Script tag into the body section of your web application code to bind the events and see these events in the console.

<script>
    document.getElementById('collection-player').addEventListener('on-initialized', evt => {
        console.log(evt.type + ': ', evt.detail);
    });
document.getElementById('collection-player').addEventListener('on-mashup-loading', evt => {
        console.log(evt.type + ': ', evt.detail);
    });
document.getElementById('collection-player').addEventListener('on-mashup-not-found', evt => {
        console.log(evt.type + ': ', evt.detail);
    });
</script>

Other available events can be found below.

Output Events for Collection Player Widget

Event Name	Event Data	Type	Scenario
on-mashup-loading	searchCriteria	object	When content search call is being sent to server, search criteria is received as event data.
on-mashup-loaded	mashupInfo	object	When content search call is successful, mashupInfo of fetched mashup is received as event data.
on-mashup-loading-failed	error	HttpErrorResponse	When content search call has failed, error info is received as event data.
on-mashup-not-found	searchCriteria	-	When content search call couldn't find any mashup against search criteria.
on-password-required	-	-	When content is protected by password. When this event is raised, a form will be shown on screen where the user will be able to enter password.
on-password-validated	validationStatus	boolean	When password validation process has been completed.
on-initialized	-	-	This will be raised when the player has loaded.
on-fullscreen-changed	isFullScreen	boolean	When the player goes into or exits from full screen, this event is raised.
on-collection-item-completed	mashupId	number	When collection item has been completed, this event is raised.
on-collection-item-changed	mashupId	number	When collection item has changed, this event is raised.
on-completed	mashupId	number	When collection item has been changed, this event is raised.

Sample Code

< html >
    < head >
        < meta charset="UTF-8" />
        <!--VIDIZMO Imports-->
        <script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js" >
        </script>

        <link rel="stylesheet" href="{portal-address}/static / compiled / widget / widgets.css " />

        <script type="text / javascript " src=" {portal - address} /static/compiled / widget / widgets.js ">
        </script>

    </head>
    <body>
        <vdz-mashup-collection class="collection - player " data-widget="true " mashup-id={mashup - id}> </vdz-mashup-collection>
        <script>
            document.querySelector('.collection-player').addEventListener('on-mashups-loading', (event) => { });
            document.getElementById('.collection-player').addEventListener('on-mashups-loaded', (event) => { });
            document.getElementById('.collection-player').addEventListener('on-mashups-loading-failed', (event) => { });
        </script>
    </body>
</html>